<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>新闻言论提取</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
	<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
	<link rel="stylesheet" type="text/css" href="static/css/index.css">
	<style type="text/css">
		#vid-container {
		  width:100%;
		  height:100%;
		  width: 820px; 
		  height: 461.25px; 
		  float: none; 
		  clear: both; 
		  margin: 2px auto;
		}

		svg {
		 border-radius:3px;
		}    
		.node {
		    cursor: pointer;
		}

		.node circle {
		  fill: #fff;
		  stroke: #99ccff;;
		  stroke-width: 3px;
		}

		.node text {
		  font: 12px sans-serif;
		}

		.link {
		  fill: none;
		  stroke: #99ccff;
		  stroke-width: 2px;
		}

		.hyper {
		color: red;
		text-decoration: underline;
		}

		.hyper:hover {
		color:yellow;
		text-decoration: none;
		}   
		.selected {
		font-weight:bold;
		}
		.not-selected {
		font-weight:normtal;
		}

	</style>
	<script type="text/javascript">
		$(function(){
			// alert("1111");
			$("input").eq(2).click(function(){
				var data = $("textarea").val();
				var req_json = JSON.stringify(data);
				var temp_dict = {};
				var mydict={"name":"Graph","children":[]};
				$.ajax({
					url:'/solve',
					type:'post',
					data: data,
					contentType: "application/json",
					dataType:'json',
				})
				.done(function(dat){
					var sSaying = "";
					for(name in dat){
						if(typeof(temp_dict[dat[name][0]]) == "undefined"){
							temp_dict[dat[name][0]]={"name":dat[name][0],"children":[]}};
						temp_dict[dat[name][0]].children.push({"name":dat[name][1]});

						sSaying += "<tr><th scope=\"row\">"+dat[name][0]+":"+"</th><td>";
						sSaying += dat[name][1];
						sSaying += "</td></tr>";
					}
					$("thead").css("display","table-row-group");
					$("tbody").html(sSaying);

					for(key in temp_dict){mydict.children.push(temp_dict[key])};
					if(d3.select('svg').length > 0){d3.select('svg').remove()};
					Graphshow(mydict);

				})
				
			})

			$("input").eq(1).click(function(){
				$("textarea").val('');

			})

			function Graphshow(treeData){
				var margin = {top: 20, right: 120, bottom: 20, left:100},
			    width = 1200 - margin.right - margin.left,
			    height = 800 - margin.top - margin.bottom;
				    
				var i = 0,duration = 750,root;
				//定义数据转换函数
				var tree = d3.layout.tree()
				    .size([height, width]);
				//定义对角线生成器diagonal
				var diagonal = d3.svg.diagonal()
				    .projection(function(d) { return [d.y, d.x]; });
				//定义svg
				var svg = d3.select("#mytree").append("svg")
					.attr("width", width + margin.right + margin.left)
					.attr("height", height + margin.top + margin.bottom)
					.append("g")
					.attr("transform", "translate(" + margin.left + "," + margin.top + ")");

				//读取json文件，进行绘图
				// var treeData = {"name":"中国",
				// 			  "children":
				// 			  [
				// 			    {
				// 			      "name":"浙江" ,
				// 			      "children":
				// 			      [
				// 			        {"name":"杭州" },
				// 			        {"name":"宁波" },
				// 			        {"name":"温州" },
				// 			        {"name":"绍兴" }
				// 			      ]
				// 			    },
							 
				// 			    {
				// 			      "name":"广西" ,
				// 			      "children":
				// 			      [
				// 			        {
				// 			          "name":"桂林",
				// 			          "children":
				// 			          [
				// 			            {"name":"秀峰区"},
				// 			            {"name":"叠彩区"},
				// 			            {"name":"象山区"},
				// 			            {"name":"七星区"}
				// 			          ]
				// 			        },
				// 			        {"name":"南宁"},
				// 			        {"name":"柳州"},
				// 			        {"name":"防城港"}
				// 			      ]
				// 			    }

				// 			  ]
				// 			}
				
				// root = treeData[0];
				// if(typeof(root) == "undefined"){root = treeData;}
				root = treeData;
				root.x0 = height / 2;
				root.y0 = 0;

				update(root);
				d3.select(self.frameElement).style("height", "800px");


				function update(source) {
				  // Compute the new tree layout.
				  var nodes = tree.nodes(root).reverse(),
				      links = tree.links(nodes);

				  // Normalize for fixed-depth.
				  nodes.forEach(function(d) { d.y = d.depth * 180; });

				  // Update the nodes鈥�
				  var node = svg.selectAll("g.node")
				      .data(nodes, function(d) { return d.id || (d.id = ++i);});

				  // Enter any new nodes at the parent's previous position.
				  var nodeEnter = node.enter().append("g")
				      .attr("class", "node")
				      .attr("transform", function(d) { return "translate(" + source.y0 + "," + source.x0 + ")"; })
				      .on("click", click);

				  nodeEnter.append("circle")
				      .attr("r", 1e-6)
				      .style("fill", function(d) { return d._children ? "#ccff99" : "#fff"; });

				  nodeEnter.append("text")
				      .attr("x", function(d) { return d.children || d._children ? -13 : 13; })
				      .attr("dy", ".35em")
				      .attr("text-anchor", function(d) { return d.children || d._children ? "end" : "start"; })
				      .text(function(d) { return d.name; })
				      .style("fill-opacity", 1e-6)
				     .attr("class", function(d) {
				              if (d.url != null) { return 'hyper'; } 
				         })
				          .on("click", function (d) { 
				              $('.hyper').attr('style', 'font-weight:normal');
				              d3.select(this).attr('style', 'font-weight:bold');
				              if (d.url != null) {
				                 //  window.location=d.url; 
				                 $('#vid').remove();

				                 $('#vid-container').append( $('<embed>')
				                    .attr('id', 'vid')
				                    .attr('src', d.url + "?version=3&amp;hl=en_US&amp;rel=0&amp;autohide=1&amp;autoplay=1")
				                    .attr('wmode',"transparent")
				                    .attr('type',"application/x-shockwave-flash")
				                    .attr('width',"100%")
				                    .attr('height',"100%") 
				                    .attr('allowfullscreen',"true")
				                    .attr('title',d.name)
				                  )
				                }
				          });

				  // Transition nodes to their new position.
				  var nodeUpdate = node.transition()
				      .duration(duration)
				      .attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; });

				  nodeUpdate.select("circle")
				      .attr("r", 10)
				      .style("fill", function(d) { return d._children ? "#ccff99" : "#fff"; });

				  nodeUpdate.select("text")
				      .style("fill-opacity", 1);

				  // Transition exiting nodes to the parent's new position.
				  var nodeExit = node.exit().transition()
				      .duration(duration)
				      .attr("transform", function(d) { return "translate(" + source.y + "," + source.x + ")"; })
				      .remove();

				  nodeExit.select("circle")
				      .attr("r", 1e-6);

				  nodeExit.select("text")
				      .style("fill-opacity", 1e-6);

				  // Update the links鈥�
				  var link = svg.selectAll("path.link")
				      .data(links, function(d) { return d.target.id; });

				  // Enter any new links at the parent's previous position.
				  link.enter().insert("path", "g")
				      .attr("class", "link")
				      .attr("d", function(d) {
				        var o = {x: source.x0, y: source.y0};
				        return diagonal({source: o, target: o});
				      });

				  // Transition links to their new position.
				  link.transition()
				      .duration(duration)
				      .attr("d", diagonal);

				  // Transition exiting nodes to the parent's new position.
				  link.exit().transition()
				      .duration(duration)
				      .attr("d", function(d) {
				        var o = {x: source.x, y: source.y};
				        return diagonal({source: o, target: o});
				      })
				      .remove();

				  // Stash the old positions for transition.
				  nodes.forEach(function(d) {
				    d.x0 = d.x;
				    d.y0 = d.y;
				  });
				}

				// Toggle children on click.
				function click(d) {
				  if (d.children) {
				    d._children = d.children;
				    d.children = null;
				  } else {
				    d.children = d._children;
				    d._children = null;
				  }
				  update(d);
				}
			}
		})
	</script>

</head>
<body>
	<div class="navbar navbar-default navbar-static-top navbar-fixed-top">
		<div class="container">
			<!-- 导航条头部元素 -->
			<div class="navbar-header">
				<button class="navbar-toggle" data-toggle="collapse" data-target="#my_menu">
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
				</button>
				<a href="#" class="navbar-brand">新闻言论自动提取</a>
			</div>
			
			<div class="collapse navbar-collapse" id="my_menu">

				<ul class="nav navbar-nav navbar-right">
					<li><a href="">联系我们</a></li>
					<li><a href="">注册</a></li>
					<li><a href="">登录</a></li>
				</ul>

			</div>

		</div>
	</div>

	<div class="container">
		<div class="col-lg-6  col-md-6 ">
		</div>
		<div class="col-lg-6  col-md-6 ">
		</div>
	</div>

	<br>
	<br>
	<br>

	<div class="container" >
		<div class="jumbotron">
			<div class="row">
				<div>
					<textarea  name="input_text" class="my-input"  placeholder="请输入你要处理的内容" rows="10" style="resize: none;overflow: auto; background-color: #eee;"></textarea>
				</div>

				<div class="container" >
					<div class="row">
						<div class="col-lg-6">
							<div >	
								<input type="file" name="">
								<!-- <input type="image" src="images/goods.jpg" name=""> -->
							</div>
						</div>

						<div class="col-lg-6">							
							<div style="text-align:right;">	
								<!-- <input type="image" src="images/goods.jpg" name=""> -->
								<input class="my-buttton" type="reset" name="" value="清空">
								<input class="my-buttton" type="submit" name="" value="提取">
							</div>
						</div>
					</div>
				</div>
				
			</div>
<!-- 			<div class="row">
				<div class="col-lg-2 col-lg-offset-10" style="padding-right:0">
					<a href="#" class="btn btn-danger" style="float: right;">提取言论</a>
				</div>
			</div> -->
		</div>	
	</div>


	<div class="container" >
		<table class="table">
			<thead style="display: none;">
				<tr>
					<th  style="width:8%">人物</th>
					<th>言论</th>
				</tr>
			</thead>
			<tbody>			
			</tbody>
		</table>
	</div>

	<div class="container" >
		<div id='mytree'>
		</div>
	</div>
</body>
</html>